import 'package:flutter/material.dart';

// 此案例作用：
// 注意我们是如何创建了两个新的无状态widget的！
// 我们清晰地分离了 显示计数器（CounterDisplay）和 更改 计数器（CounterIncrementor）的逻辑。
// 尽管最终效果与前一个示例相同，但责任分离允许将复杂性逻辑封装在各个widget中，同时保持父项的简单性

//在Flutter中，事件流是“向上”传递的，而状态流是“向下”传递的
// （译者语：这类似于React/Vue中父子组件通信的方式：
// 子widget到父widget是通过事件通信，而父到子是通过状态），
class CounterDisplay extends StatelessWidget {

  CounterDisplay({this.count});

  final int count;

  @override
  Widget build(BuildContext context) {
    return new Text('Count: $count');
  }

}

class CounterIncrementor extends StatelessWidget {
  CounterIncrementor({this.onPressed});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return new RaisedButton(onPressed: onPressed,
      child: new Text('增加'),);
  }
}

class Counter2 extends StatefulWidget {

  @override
  State createState() {
    return new _CounterState();
  }
}

class _CounterState extends State<Counter2> {

  int  _counter = 0;

  void increment = 0;

  void _increment() {
    setState(() {
      ++_counter;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(children: <Widget>[
      new CounterIncrementor(onPressed: _increment,),
      new CounterDisplay(count: _counter,)
  ],);
  }
}